<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" href="static/scss/default/index.css?{VERHASH}">
<link rel="stylesheet" href="user/my/template/pc/assets/index.css?{VERHASH}">
<link rel="stylesheet" type="text/css" href="static/scss/layout.css?{VERHASH}"/>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/template/pc/assets/index.css?{VERHASH}"/>
<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<el-container class="page-main">
		<!--{template common/container/pc/header_default}-->
		<el-main style="padding: 0">
            <el-scrollbar ref="scrollbar" style="padding: var(--el-main-padding);">
                <div class="container">
                    <!--{template common/container/pc/ucenter_header}-->
                    <div class="notification" style="margin-top:15px">
                        <div style="padding-bottom: 20px;border-bottom: var(--el-border); display: flex;justify-content: space-between;">
                            <div>
                                <el-text type="info">{lang share_dateline}：</el-text>
                                <template  v-for="item in actionData">
                                    <el-check-tag size="small"   class="filter-item" :checked="dataActive == item.key"  @change="filterChange(item.key,'date')" >{{item.name}}</el-check-tag>
                                </template>
                            </div>
                            <div>
                                <el-text type="info">{lang share_status}：</el-text>
                                <el-check-tag size="small" style="margin-right: 6px;"  class="filter-item" :checked="status === 0"  @change="filterChange(0,'status')" >{lang share_status_0}</el-check-tag>
                                <el-check-tag size="small" style="margin-right: 6px;"  class="filter-item" :checked="status === -1"  @change="filterChange(-1,'status')" >{lang share_status_-1}</el-check-tag>
                                <el-check-tag size="small" style="margin-right: 6px;"  class="filter-item" :checked="status === -2"  @change="filterChange(-2,'status')" >{lang share_status_-2}</el-check-tag>
                            </div>
                            <div> 
                                <el-input
                                    style="width: 200px;"
                                    v-model="keyword"
                                    placeholder="{lang search}"
                                    class="input-search"
                                    clearable
                                    @change="searchSubmit">
                                    <template #suffix>
                                        <el-icon @click="searchSubmit" style="cursor: pointer;"><Search /></el-icon>
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-table :data="tableData" style="width: 100%" :table-layout="auto"  :default-sort="{ prop: 'fdateline', order: 'descending' }" @sort-change="handleSortChange" >
                            <el-table-column  prop="title" label="{lang share_title}"  min-width="200" >
                                <template #default="scope">
                                <el-link :underline="false" target="_blank" :href="scope.row.shareurl">{{scope.row.title}}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column   label="{lang share_limit}" width="250">
                                <template #default="props">
                                    <div class="shareinfo-wrapper" :id="'shareinfo_'+props.row.id" @click="handleExpand(props.row.id)">
                                    <template v-if="props.row.fendtime">
                                        <span class="shareinfo endtime" ><em>{lang share_endtime}:</em> <b>{{ props.row.fendtime }}</b></span>
                                    </template>
                                    <template v-if="props.row.times>0">
                                        <span class="shareinfo times" ><em>{lang share_times}:</em> <b> {{ props.row.times }}</b></span>
                                    </template>
                                    <template v-if="props.row.password!=''">
                                        <span class="shareinfo password" ><em>{lang share_password}:</em> <b> {{ props.row.password }}</b></span>
                                    </template>
                                    <template v-if="props.row.fperm">
                                        <span class="shareinfo perm" ><em>{lang share_perm}: </em> <b>{{ props.row.fperm }}</b></span>
                                    </template>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fstatus"  label="{lang share_status}" width="80"  align="center"></el-table-column>
                            <el-table-column  prop="fdateline" sortable="custom" label="{lang share_dateline}" width="150" align="center"></el-table-column>
                            <el-table-column   label="{lang share_address}" width="128" align="center">
                                <template #default="props">
                                    <div style="display: flex;flex: 1;" >
                                        <div style="white-space: nowrap;margin-left: 12px;">
                                            <el-button icon="CopyDocument" title="{lang copy_link}" @click="RightCopyUrl(props.row.fshareurl)" plain></el-button>
                                            <el-popover
                                                    placement="top"
                                                    popper-class="qrcode-box"
                                                    :width="224"
                                                    :teleported="true"
                                                    @before-enter="TableGeturlqrcode(props.row.id,true)"
                                                    trigger="click">
                                                <div v-loading="!props.row.isqrcode" style="width: 200px;font-size: 0;">
                                                    <el-image draggable="false" v-if="props.row.qrcodeurl" style="width: 200px; height: 200px" :src="props.row.qrcodeurl" fit="contain">
                                                        <template #error><div class="el-image__placeholder"></div></template>
                                                    </el-image>
                                                    <el-text tag="p" style="text-align: center;padding-top: 12px;">{lang qrcode_image_tip}</el-text>
                                                    <div v-if="props.row.qrcodeurl" class="download" @click="TableDownQrcodeurl(props.row.qrcodeurl)">
                                                        <div style="text-align: center;">
                                                            <el-icon style="font-size: 22px;"><Download /></el-icon>
                                                            <el-text tag="p" style="width: 100%;">{lang qrcode_download}</el-text>
                                                        </div>
                                                    </div>
                                                </div>
                                                <template #reference>
                                                    <el-button plain title="{lang qrcode_get}">
                                                        <template #icon>
                                                            <el-icon>
                                                                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M384 64l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2c0 51.2 41.6 89.6 89.6 89.6l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2C473.6 105.6 435.2 64 384 64zM428.8 380.8c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8l0-227.2c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8L428.8 380.8z"></path><path d="M192 192l134.4 0 0 134.4-134.4 0 0-134.4Z"></path><path d="M377.6 544l-243.2 0c-48 0-86.4 38.4-86.4 89.6l0 220.8c0 48 38.4 89.6 86.4 89.6l243.2 0c48 0 86.4-38.4 86.4-89.6l0-220.8C467.2 582.4 425.6 544 377.6 544zM422.4 851.2c0 25.6-19.2 44.8-44.8 44.8l-243.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-220.8c0-25.6 19.2-44.8 44.8-44.8l243.2 0c25.6 0 44.8 19.2 44.8 44.8L422.4 851.2z" ></path><path d="M192 668.8l131.2 0 0 131.2-131.2 0 0-131.2Z"></path><path d="M633.6 470.4l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2c0-51.2-41.6-89.6-89.6-89.6l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2C544 432 585.6 470.4 633.6 470.4zM588.8 153.6c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8l0 227.2c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8L588.8 153.6z"></path><path d="M700.8 192l134.4 0 0 134.4-134.4 0 0-134.4Z"></path><path d="M572.8 716.8l137.6 0c12.8 0 22.4-9.6 22.4-22.4l0-137.6c0-12.8-9.6-22.4-22.4-22.4l-137.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 137.6C550.4 707.2 560 716.8 572.8 716.8z"></path><path d="M886.4 563.2l0 38.4c0 12.8 12.8 25.6 25.6 25.6l38.4 0c12.8 0 25.6-12.8 25.6-25.6l0-38.4c0-12.8-12.8-25.6-25.6-25.6l-38.4 0C899.2 537.6 886.4 547.2 886.4 563.2z"></path><path d="M582.4 944l48 0c12.8 0 22.4-9.6 22.4-22.4l0-48c0-12.8-9.6-22.4-22.4-22.4l-48 0c-12.8 0-22.4 9.6-22.4 22.4l0 48C560 934.4 569.6 944 582.4 944z"></path><path d="M944 704l-99.2 0c-16 0-28.8 12.8-28.8 28.8l0 44.8-48 0c-19.2 0-32 12.8-32 32l0 99.2c0 16 12.8 28.8 28.8 28.8l179.2 3.2c16 0 28.8-12.8 28.8-28.8l0-179.2C972.8 716.8 960 704 944 704z" ></path></svg>
                                                            </el-icon>
                                                        </template>
                                                    </el-button>
                                                </template>
                                            </el-popover>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="{lang operation}" width="150" align="center">
                                <template #default="scope">
                                    <el-button type="primary" @click="handleEdit(scope.row.id)"><el-icon ><Edit /></el-icon></el-button>
                                    <el-popconfirm width="250px" title="{lang share_delete_confirm}" @confirm="handleDelete(scope.row.id)">
                                        <template #reference>
                                            <el-button type="danger" ><el-icon ><Delete /></el-icon></el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div style="padding-top: 15px;">
                    <el-pagination 
                    v-model:current-page="paramData.page" 
                    background 
                    v-model:page-size="paramData.perpage"
                    :page-sizes="[50, 100, 150, 200]"
                    layout="total, sizes, prev, pager, next, jumper" 
                    style="justify-content: center;" 
                    :total="paramData.total"
                    @size-change="pageSizeChange"
                    @current-change="getData"></el-pagination>
                    <!-- hide-on-single-page -->
                </div>
            </el-scrollbar>
		</el-main>
	</el-container>
    <!--{template pc/componets/shareEditDialog}-->
</div>
<script type="text/javascript">
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch } = Vue;
	const dzzoffice = createApp({
		data() {
			return {
				DocumentThemeColor:'',
				UcenterHeaderMenuIndex:'myshares',
                tableData:[],
                keyword:'',
                dataActive:'all',
                status:0,
                paramData:{
                    page:1,
                    perpage:20,
                    keyword:'',
                    status:0,
                    date:'all',
                    order:'desc',
                    orderby:'fdateline'
                },
                PostParam:'',
                actionData:{eval echo json_encode(array_values($actionData))},
			}
		},
        mixins:[UcenterHeader,ShareEditDialogMixin],
		watch:{
			DocumentThemeColor:{
				handler(newval){
					document.querySelector('html').className = newval
				},
				deep:true,
				// immediate:true
			}
		},
		created() {
			 //主题颜色
			let theme = localStorage.getItem('theme');
			if(theme){
				this.DocumentThemeColor=theme;
			}else{
				this.DocumentThemeColor = 'light'
			}
            this.getData();
		},
		methods: {
            searchSubmit(){
                this.paramData.page = 1;
                this.paramData.keyword = this.keyword;
                this.getData();
            },
            pageSizeChange(){
                this.paramData.page = 1;
                this.getData();
            },
            filterChange(val,key){
                if(key=='date') {
                    if (this.dataActive == val) return false;
                    this.dataActive = val;
                    this.paramData.page = 1;
                    this.paramData.date = val;
                    this.getData();
                }else if(key=='status'){
                    this.paramData.page = 1;
                    this.paramData.status = val;
                    this.status=val;
                }
                this.getData();
            },
            handleSortChange(column){

                this.paramData.orderby=column.prop;
                if(column.order=='ascending'){
                    this.paramData.order = 'asc';
                }else if(column.order=='descending'){
                    this.paramData.order = 'desc';
                }else{
                    this.paramData.order = '';
                }
                this.getData();
            },
            TableDownQrcodeurl(url){
                let a = document.createElement('a')
                a.href = url;
                a.download = '{lang qrcode}'
                a.click()
            },
            //获取二维码
            async TableGeturlqrcode(sid){
                const self = this;
                let curr = '';
                curr = this.tableData.find((current) => {
                    return current.id == sid;
                });
                if(curr && curr.isqrcode){
                    return false;
                }
                const {data: res} = await axios.post(MOD_URL+'&op=ajax&do=geturlqrcode',{
                    sid:sid
                });
                if(res.success){
                        curr.isqrcode = true;
                        curr.qrcodeurl = res.qrcode;
                }else{
                    self.$message.error(res.msg || '{lang failure}');
                }
            },
            RightCopyUrl(url){
                const self = this;
                var input = document.createElement('input'); input.setAttribute('id', 'copyInput');
                input.setAttribute('value', url);
                document.getElementsByTagName('body')[0].appendChild(input);
                document.getElementById('copyInput').select();
                document.execCommand('copy')
                self.$message({
                    message: '{lang share_link_copy_success}',
                    type: 'success'
                });
                document.getElementById('copyInput').remove();
            },
            getData(){ 
                let self = this;
                let param = {
                    page:this.paramData.page,
                    perpage:this.paramData.perpage,
                    date:this.paramData.date,
                    keyword:this.paramData.keyword,
                    status:this.paramData.status,
                    orderby:this.paramData.orderby,
                    order:this.paramData.order
                };

                if(this.PostParam){
					this.PostParam();
				}
                let CancelToken = axios.CancelToken;
                axios.post('{MOD_URL}&op=ajax&do=filelist',param,{
					cancelToken: new CancelToken(function executor(c) {
					    self.PostParam = c;
					})
				}).then(function ({data:res}) {
					if(res.success){
                        self.tableData = res.data.data || [];
                        self.paramData.total = parseInt(res.data.total);
                    }else{
                        self.$message.error(res.msg || '{lang failure}');
                    }
				}).catch(function (error) {
				    console.log(error);
				});
            },
			DocumentThemeChange(){
				if(this.DocumentThemeColor=='light'){
					this.DocumentThemeColor='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor='light';
					localStorage.setItem('theme','light');
				}
				let self=this;
			},

			handleDelete(id){
				let self=this;

				axios.post('{MOD_URL}&op=ajax&do=delete', {
					id:id
				}).then(function(res){
					//window.location.reload();
					if(res.data.success){
						let index=self.tableData.findIndex((item)=>{
							if(item.id===id) return true;
						});
						if(index>-1) self.tableData.splice(index,1);
						if(self.tableData.length<1) window.location.reload();
					}else{
						self.$message({
							message: res.data.msg,
							type: 'error',
						  });
					}
				}).catch(function (error) {
					console.log(error);
				});
					
				  
			},
            handleEdit(sid){
                let self=this;

                self.editDialog.sid=sid;
                self.editDialog.visible=true;
            },
            handleExpand(id){
               let obj=document.getElementById('shareinfo_'+id);
               if(obj.className === 'shareinfo-wrapper'){
                   obj.className = 'shareinfo-wrapper expand';
               }else{
                    obj.className = 'shareinfo-wrapper';
               }
            }
		},
		mounted() {
            dzzoffice.WindowThis = this;
        }
	});
	dzzoffice.use(ElementPlus, {
		locale: {$_G['language_list'][$_G['language']]['elementflagCamel']},
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice.component(key, component)
	}
	dzzoffice.component('comavatar', comavatar);
    dzzoffice.component('international',international);
	// 屏蔽警告信息
	dzzoffice.config.warnHandler = function(){return null};
	dzzoffice.mount('#dzzoffice');
</script>

<!--{template common/container/pc/footer}-->
